<template>
  <!-- <div :class="['nav-bar',{'is-fixed':isFixed}]"> -->
  <div class="nav-bar" :class="{'is-fixed':isFixed}">
  <!-- <div class="nav-bar"> -->
    <div class="container">
      <!-- <div class="hd" :class="{'is_fixed':isFixed}"> -->
        <div class="bar-left">
          <h3>小米10 青春版 5G</h3>
          <span>|</span>
          小米10 Pro
        </div>
        <div class="bar-right">
          <ul>
            <li>
              <a href="javascript:;">概述</a>
              <span>|</span>
            </li>
            <li>
              <a href="javascript:;">参数</a>
              <span>|</span>
            </li>
            <li>
              <a href="javascript:;">F码通道</a>
              <span>|</span>
            </li>
            <li>
              <a href="javascript:;">咨询客服</a>
              <span>|</span>
            </li>
            <li>
              <a href="javascript:;">用户评价</a>
            </li>
            <li>
              <a href="javascript:;">立即购买</a>
            </li>
          </ul>
          <!-- 概述 | 参数 | F码通道 | 咨询客服 | 用户评价 立即购买 -->
        </div>
      </div>

    </div>
</template>

<script>
export default {
  data () {
    return {
      isFixed: false
    }
  },
  created () {
    window.addEventListener('scroll', this.handleFixed)
  },
  // 这里来销毁滚动事件
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleFixed)
  },
  methods: {
    handleFixed () {
      const scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
      this.isFixed = scrollTop > 151
      // console.log(scrollTop)
      // console.log(this.isFixed)
    }
  }

}
</script>

<style lang="scss">
@import '../assets/scss/mixin.scss';
.nav-bar {
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,.2);
  border-top: 1px solid #e3e3e3;
  width: 100%;
  position: relative;
  z-index: 9;
   &.is-fixed{
      position: fixed;
      top: 0;
    }
    .container{
    height: 64px;

    // display: flex;
    // justify-content: space-between;
    @include flex();
    .bar-left {
      line-height: 64px;
      font-size: 12px;
      color: #616161;
      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 400;

        color: #424242;
        float: left;
      }
      span {
        padding: 0 10px;
      }
    }
    .bar-right {
      ul {
        @include flex();
        li {
          &:first-child a{
              color: #ff6700;
            }
            &:last-child a{
              display: inline-block;
              width: 122px;
              height: 31px;
              background-color: #ff6700;
              color: #fff;
              text-align: center;
              line-height: 31px;
              margin-left: 10px;
            }
          a {
            color: #616161;
            font-size: 14px;

          }
          > span {
            padding: 0 12px;
          }
        }
      }
    }
    }

}
</style>
